<!-- src/views/Home.vue -->
<template>
    <div class="container">
      <sideBar></sideBar>
      <main class="content">
        <Top></Top>
        <div class="contentIn">
          <!-- 内容区域 -->
          <div class="compositon_content">
            <div class="compositon_left">
              <!-- 创作模式 -->
              <div class="comp_type">
                  <h3 class="title">创作模式</h3>
                <div class="comp_type_button">
                  <button @click="modeIndex = 0" :class="{'active': modeIndex == 0}">简易模式</button>
                  <button :disabled="isProfessionalMode" @click="modeIndex = 1" :class="{'active': modeIndex == 1}">专业模式</button>
                </div>
              </div>

              <!-- 歌曲描述 -->
              <div v-if="modeIndex == 0 || modeIndex == 1" class="music_keyword">
                <h3 class="title">歌曲描述</h3>
                <div class="textarea_con">
                  <textarea 
                    v-model="musicDescrib" 
                    @input="musicDescribWordNum"
                    :placeholder="placeholderKeyword"
                    maxlength="1200"
                    ></textarea>
                  <div class="prompt">
                    <div>
                      <button type="button" @click="getRandomTags">刷新提示词</button>
                      <button type="button" @click="delKeyWord">删除提示词</button>
                    </div>
                    <p>{{ musicDescrib.length }} / 1200</p>
                  </div>
                </div>

                <!-- 纯音乐按钮 -->
                <div class="tab_swtich_con">
                  <p>纯音乐</p>
                  <div 
                    class="tab_swtich" 
                    :class="{'active': isSlideActive}"
                    @click="slideToggle"
                    >
                    <div class="slide_btn"></div>
                  </div>
                </div>

                <div v-if="modeIndex == -1" class="music_type">
                  <div class="button_row">
                    <!-- 场景、风格、乐器 -->
                    <div class="music_type_btn">
                      <button 
                        v-for="(item, index) in musicType" :key="index"
                        @click="chooseMusicType(index)"
                        :class="{'active': musicTypeIndex===index}"
                        >
                        <div>{{ item }}</div>
                      </button>
                    </div>
                  </div>

                  <div v-show="musicTypeIndex === 0" class="music_type_detail">
                    <ul>
                      <li
                        v-for="(item, index) in musicTypeDeatail.scene"
                        :key="index"
                        @click="toggleSelection('scene', item.id)"
                        :class="{ 'active': isSelected('scene', item.id) }"
                      ><div>{{ item.title }}</div></li>
                    </ul>
                  </div>
                  <div v-show="musicTypeIndex === 1" class="music_type_detail">
                    <ul>
                      <li
                        v-for="(item, index) in musicTypeDeatail.style"
                        :key="index"
                        @click="toggleSelection('style', item.id)"
                        :class="{ 'active': isSelected('style', item.id) }"
                      ><div>{{ item.title }}</div></li>
                    </ul>
                  </div>
                  <div v-show="musicTypeIndex === 2" class="music_type_detail">
                    <ul>
                      <li
                        v-for="(item, index) in musicTypeDeatail.instrument"
                        :key="index"
                        @click="toggleSelection('instrument', item.id)"
                        :class="{ 'active': isSelected('instrument', item.id) }"
                      ><div>{{ item.title }}</div></li>
                    </ul>
                  </div>
                </div>

              </div>

              <!-- 音乐模型 -->
              <div v-if="modeIndex == 1" class="music_model">
                <h3 class="title">音乐模型</h3>
                <button class="model_btn">
                  v1.0模型 <img src="../images/icon_musicModel.svg" alt="">
                </button>
              </div>

              <!-- 歌词生成 -->
              <div  v-if="modeIndex == 1 && !isSlideActive" class="lyrics_container">
                <h3 class="title">歌词生成</h3>
                <div class="lyrics_textarea">
                  <textarea 
                    name="" 
                    id="" 
                    class="aiLyricsTextarea"
                    v-model="musiclyric"
                    maxlength="1200" 
                    placeholder="AI主动生成歌词"
                    @input="onTextarea"
                    >
                  </textarea>
                  <div class="lyrice_btn">
                    <button  type="button" @click="aiCreateLyric">AI生成歌词</button>
                    <p> {{ musiclyric.length }} / 1200 </p>
                  </div>

                </div>
              </div>

              <!-- 提交 -->
              <div class="reset_submit">
                <button @click="resetFn">重置</button>
                <button :class="{disabled:isCreateMusicComplete}" :disabled="isCreateMusicComplete" @click="createMusic">创作</button>
              </div>
            </div>

            <!-- 右侧生成音乐 -->
            <div class="compositon_right" >
              <div class="show_lyric_area">
                <textarea v-show="lyricText !== 'instrumental'" name="" id="" :value="lyricText"></textarea>
                <div class="showInstrumental" v-show="lyricText === 'instrumental'">{{ lyricText }}</div>
              </div>
              <div class="show_music_area">

                <div 
                  class="work_list" 
                  v-for="(item, index) in workListData" 
                  :key="item.id">
                  <workList 
                    :audioData = item
                    :audioSrc = "item.audio_url" 
                    :auidoImg = "item.image_url"
                    :playIndex = "index"
                    @play="handlePlay(index)"
                    :musicId = "item.id"
                    @like="handleLike"
                    :isCreateFinish="createFinish"
                    @showLyric="showlyricFn"
                    ></workList>
                </div>

                <div v-show="creatingMusic" class="creating creating1"></div>
                <div v-show="creatingMusic" class="creating creating2"></div>

                <!-- <div v-if="_showTest">
                  <p style="font-size: 14px; color:#FFF;">creatingMusic：{{ creatingMusic }}</p>
                  <p style="font-size: 14px; color:#FFF;">isCreateMusicComplete：{{ isCreateMusicComplete }}</p>
                  <p style="font-size: 14px; color:#FFF;">instrumental: {{ instrumental }}</p>
                  <p style="font-size: 14px; color:#FFF;">isSlideActive: {{ isSlideActive }}</p>
                  <p style="font-size: 14px; color:#FFF;">{{ workListData }}</p>
                </div> -->
                
                
                <div v-show="!workListData.length && !creatingMusic" class="nowork">
                  <div class="noworkIn">
                    <img style="opacity: .5;" src="../images/musical_note.svg" alt="">
                    <p>G视频AI音 让灵感创作更简单</p>
                  </div>
                </div>

              </div>
              

            </div>
          </div>
          <!-- 内容区域结束 -->
        </div>
      </main>
      <!-- <PopupModal></PopupModal> -->
      
    </div>
  </template>
  
  <script setup>
  // 如果需要在 Home 页面处理逻辑可以在这里写
  import axios from 'axios';
  import Top from '../components/top.vue';
  import sideBar from '../components/sideBar.vue';
  import {ref, reactive, provide, toRaw} from 'vue'
  import { useUserStore } from '../store/user';
  import workList from '../components/workList.vue';
  import MusicService from "@/utils/MusicService";
  import { ElLoading, ElMessage } from 'element-plus';
  const { setUsername, setToken, userState } = useUserStore()

  let modeIndex = ref(0)
  let musicTypeIndex = ref(0)
  let musicType = reactive(['场景', '风格', '乐器'])
  let placeholderKeyword = ref('请输入描述词')
  // let musicDescrib = ref('甜美 女生 小清新')
  let musicDescrib = ref()
  let musiclyric = ref('')
  let isSlideActive = ref(false)
  let isPureMusic = ref(false)
  let isProfessionalMode = ref(false)      // 是否可以点击专业模式
  let isCreateMusicComplete = ref(false)   // 音乐是否制作完成
  let creatingMusic = ref(false)           // 正在制作歌曲
  let loading1 = null
  let loading2 = null

  let musicTitle = ref('false') 
  let lyricText = ref('')


  // let _timer = null
  let _showTest = ref(false)
  if ( process.env.NODE_ENV === 'development' ){
    _showTest.value = true
  } else {
    _showTest.value = false
  }

 
  const model = ref("chirp-v3-5");
  const instrumental = ref(false);             // 歌词参数
  let list = [];
  let workListData = reactive([]);
  const fallbackCover = ref("fallbackCover.png");

  let lyricsLoading = null
  
  console.log(userState)

  if ( !userState.token ) {             //如果没有登录权限
    setTimeout(() => {
      isProfessionalMode.value　 = true
      modeIndex.value = 0
    },1000)
  } else {                           ////如果有登录权限
    isProfessionalMode.value　 = false
    modeIndex.value = 1
  }


  function showlyricFn(lyric) {
    console.log(lyric)
    if (lyric==='instrumental') {
      lyricText.value = '纯音乐'
    } else {
      lyricText.value = lyric
    }
  }

  userState.isShowLogin = false
  // 创作音乐完成时的回调
  provide('createFinish', createFinish)
  function createFinish(str) {
    if(loading1) loading1.close()
    if(loading2) loading2.close()
    creatingMusic.value = false
    isCreateMusicComplete.value = false

    // musiclyric.value = ''  
  }

  // ==============+==============+==============+==============+==============+==============+==============+==============+

  // 创作音乐
  function createMusic() {
    // let instrumental = true  // true: 纯音乐， false: 有歌词
    let url = ''
    let timeout = 5 * 60 * 1000
    let count = 0
    
    if ( process.env.NODE_ENV === 'development' ){
      url = '/createMusic'
    } else {
      url = 'https://www.gzrbxmt.com/api3/api_create_music'
    }

    // _timer = setInterval(() => {
    //   console.log(++count)
    // },1000)

    const createMusicData = {
      action: "generate", 
      model: "chirp-v3-5", 
      style: "", 
      file: "",
      prompt: toRaw(musicDescrib.value),
      lyric: toRaw(musiclyric.value),
      instrumental: toRaw(instrumental.value),
      custom: true  // 默认歌词歌曲
    }

    if (modeIndex.value === 0) { // 简易模式
      if ( instrumental.value ) { // 纯音乐
        console.log('简易模式纯音乐')
        createMusicData.lyric = ''
        createMusicData.custom = false  // 纯音乐
        createMusicFn(url, timeout, createMusicData)
      } else {
        console.log('简易模式歌词歌曲')
        createMusicLoading()
        aiCreateLyric(function() {
          createMusicData.lyric = toRaw(musiclyric.value)
          createMusicData.custom = true  // 歌词歌曲
          createMusicFn(url, timeout, createMusicData)
        })
      }
    }

    if(modeIndex.value === 1) { // 专业模式

      if (!instrumental.value && !musiclyric.value) {
        ElMessage.error({
          message:'请输入歌词',
          duration:5000
        })
        // clearInterval(_timer)
        return
      }
      
      if ( instrumental.value ) { // 纯音乐
        console.log('专业模式纯音乐')
        createMusicData.lyric = ''
        createMusicData.custom = false  // 纯音乐
        
      } else {
        console.log('专业模式歌词歌曲')
        createMusicData.custom = true  // 歌词歌曲
        
      }
      
      createMusicFn(url, timeout, createMusicData)
    }
  }


  let findTimer = null
  

  function getMusic(id) {
    axios({
      method:'GET',
      url: 'https://www.gzrbxmt.com/api3/status/' + id,
    }).then(response => {
      console.log('获取生成音乐：', response)

      const data = response.data

      if(data.status.toLowerCase() === "success" ) {

        if( data.result.status && data.result.status.toLowerCase() == 'failure' ) {

          ElMessage.error({
            message: data.result.error,
            duration:5000
          })
          
          if(loading1) loading1.close()
          if(loading2) loading2.close()
          creatingMusic.value = false
          isCreateMusicComplete.value = false

        } else {
          const music = data.result.data
          console.log( '生成音乐成功' )
          workListData.push(music[0])
          workListData.push(music[1])
          userState.musicList.push(music[0]);
          userState.musicList.push(music[1]);
        }
        clearInterval(findTimer)

      } else if(data.status.toLowerCase() === "pending") {
        console.log('正在生成')
      } else {

        ElMessage.error({
          message:'生成失败，请重新生成',
          duration:5000
        })
        if(loading1) loading1.close()
        if(loading2) loading2.close()
        clearInterval(findTimer)
      }
    })
  }

  // 创作音乐
  function createMusicFn(url, timeout, data) {

    if (!creatingMusic.value) {
      createMusicLoading()
    }

    axios({
      method:'POST',
      url,
      type: "Content-Type: application/json",
      timeout,
      data
    }).then(response => {
      console.log(response)

      findTimer = setInterval(() => {
        getMusic(response.data.task_id)
      },2000)
      
    }).catch((error) => {

      // clearInterval(_timer)
      loading.close()
      isCreateMusicComplete.value = false
      if (!workListData.length) creatingMusic.value = false

      console.log('生成错误对象 = error', error)
      console.log('生成错误对象 = msg', error.response.data.error.message)

      if (error.code === 'ECONNABORTED' && error.message.indexOf('timeout') != -1) {
        ElMessage.error({
          message:'请求超时，请重新生成',
          duration:5000
        })
        return
      }
      
      if( error.response.data.error.code === 'used_up'){
        ElMessage.error({
          message: '您的次数已用完，请在商城中购买更多',
          duration: 5000
        })
        return
      }

      if( error.response.data.error.code === 'timeout'){
        ElMessage.error({
          message: '等待音频生成时超时',
          duration: 5000
        })
        return
      }

      ElMessage.error({
        message:'生成错误，请更换提示词重新生成',
        duration:5000
      })
    })
  }



// ==============+==============+==============+==============+==============+==============+==============+==============+

  // 202501051923修改 开始 ------------
  let lyricTimer = null

  function getLyric(id, fn) {
    axios({
      method:'GET',
      url: 'https://www.gzrbxmt.com/api3/status/' + id,
    }).then(response => {
      console.log('获取生成歌词：', response)
      const data = response.data

      if(data.status.toLowerCase() === "success" ) {
        
        musiclyric.value = data.result.data.text
        musicTitle.value = data.result.data.title
        if(lyricsLoading) lyricsLoading.close()
        if(typeof fn === 'function'){
          fn()
        }
        clearInterval(lyricTimer)

      } else if(data.status.toLowerCase() === "pending") {
        console.log('正在生成')
      } else {
        ElMessage.error({
          message:'生成失败，请重新生成',
          duration:5000
        })
        clearInterval(lyricTimer)
      }
    })
  }
  // 202501051923修改 结束 ------------

  // ai生成歌词
  function aiCreateLyric(fn) {

    if (!musicDescrib.value) {
      ElMessage.error({
        message:'请先输入歌曲描述词',
        duration:5000
      })
      return
    }

    musiclyric.value = ''
    console.log(isSlideActive.value)

    if(modeIndex.value === 1 && !isSlideActive.value) {

      lyricsLoading = ElLoading.service({
        target: document.querySelector('.lyrics_textarea'),
        text: '正在生成，请稍侯...',
        customClass: 'custom-loading',
        background: 'rgba(0, 0, 0, 0.3)',
      })
    }

    let url = ''
    if ( process.env.NODE_ENV === 'development' ){
      url = '/LyricsGeneration'
    } else {
      url = 'https://www.gzrbxmt.com/api3/api_Lyrics_Generation'
    }

    axios({
      method:'POST',
      url,
      type: "Content-Type: application/json",
      data: {
        prompt: toRaw(musicDescrib.value)
      }
    }).then(res => {


      // 202501051923修改 开始 ------------
      lyricTimer = setInterval(() => {
        getLyric(res.data.task_id, function() {
          if(typeof fn === 'function'){
              fn()
          }
        })
      },2000)
      // 202501051923修改 结束 ------------


      // console.log('歌词生成成功：res',res)
      // const data = res.data
      // if (res.status === 200) {
      //   if (res.data.success) {
      //     musiclyric.value = res.data.data.text
      //     if(lyricsLoading) lyricsLoading.close()
      //     if(typeof fn === 'function'){
      //       fn()
      //     }
      //   }
      // }


    }).catch(error => {
      console.log('catch - error:', error)
      ElMessage.error({
        message:'歌词生成失败，请重试',
        duration:5000
      })
      if(lyricsLoading) lyricsLoading.close()
    })
  }

  // ==============+==============+==============+==============+==============+==============+==============+==============+

  function handlePlay(index) {
    console.log('userState.playIndex:', userState.playIndex)
    console.log('index:',index)
    if( userState.playIndex === index ) {
      userState.playIndex = null
    } else {
      userState.playIndex = index
    }
  }

  let selectedItems = reactive({
    scene:[],
    style:[],
    instrument:[]
  })
  let musicTypeDeatail = reactive(
    {
      scene: [
        { id:'s0', title:'场景0'},
        { id:'s1', title:'场景1'},
        { id:'s2', title:'场景2'},
        { id:'s3', title:'场景3'},
        { id:'s4', title:'场景4'},
        { id:'s5', title:'场景5'}
      ],
      style: [
        { id:'f0', title:'风格0'},
        { id:'f1', title:'风格1'},
        { id:'f2', title:'风格2'},
        { id:'f3', title:'风格3'},
        { id:'f4', title:'风格4'},
        { id:'f5', title:'风格5'}
      ],
      instrument: [
        { id:'f0', title:'乐器0'},
        { id:'y1', title:'乐器1'},
        { id:'y2', title:'乐器2'},
        { id:'y3', title:'乐器3'},
        { id:'y4', title:'乐器4'},
        { id:'y5', title:'乐器5'}]
    }
  )


  function createMusicLoading() {
    loading1 = ElLoading.service({
        target: document.querySelector('.creating1'),
        text: '正在生成，请稍侯...',
        customClass: 'custom-loading',
        background: 'rgba(0, 0, 0, 0.3)',
      })
    loading2 = ElLoading.service({
      target: document.querySelector('.creating2'),
      text: '正在生成，请稍侯...',
      customClass: 'custom-loading',
      background: 'rgba(0, 0, 0, 0.3)',
    })
      creatingMusic.value = true
      isCreateMusicComplete.value = true
  }

  function handleLike(id) {
    console.log(id)
  }

  function slideToggle() {
    isSlideActive.value = !isSlideActive.value
    isPureMusic.value = isSlideActive.value
    instrumental.value = isSlideActive.value
    if (isSlideActive.value) {
      console.log('清空歌词')
       musiclyric.value = ''
    }
  }

  function chooseMusicType(index){
    musicTypeIndex.value = index
    console.log(index)
  }

  function isSelected(category, id){
    return selectedItems[category].includes(id);
  };

  // 切换选中状态
  const toggleSelection = (category, id) => {
    const selectedArray = selectedItems[category];
    const index = selectedArray.indexOf(id);

    if (index === -1) {
      // 如果未选中，添加到选中数组
      selectedArray.push(id);
    } else {
      // 如果已选中，移除该项
      selectedArray.splice(index, 1);
    }
    console.log(selectedItems)
  };

  const musicTags = [
    // 风格（Genre & Mood）
    "甜美", "治愈", "唯美", "深情", "忧郁", "热血", "激情", "宁静", "萨克斯浪漫",
    "抒情", "动感", "复古", "流畅", "电音律动", "放松慢节拍",
    "小清新", "电子", "古典", "摇滚", "流行", "爵士", "乡村", "说唱", "民谣", 
    "节奏蓝调 (R&B)", "EDM（电子舞曲）", "朋克",

    // 场景（Scenes）
    "通勤", "健身", "学习", "工作", "睡前", "清晨",
    "圣诞节", "万圣节", "情人节", "春节",
    "公路旅行", "烛光晚餐", "独处时", "户外郊游", "聚会嗨歌", "淋雨独行",

    // 乐器（Instruments）
    "钢琴", "吉他（木吉他/电吉他）", "小提琴", "贝斯", "鼓", "长笛", 
    "萨克斯", "二胡", "琵琶", "古筝",
    "合成器", "鼓机", "电音编曲"
  ];
  // 刷新提示词
  getRandomTags()
  function getRandomTags() {
    const shuffled = musicTags.sort(() => Math.random() - 0.5); // 随机打乱数组
    const selectedTags = shuffled.slice(0, 3); // 取前三个
    musicDescrib.value = selectedTags.join(" "); // 用空格分割
  }
  // 删除提示词
  function delKeyWord() {
    musicDescrib.value = ''
  }

  // 歌词输入
  function onTextarea() {
    isSlideActive.value = false
  }

  // 重置
  function resetFn() {
    selectedItems.scene = []
    selectedItems.style = []
    selectedItems.instrument = []
    musicDescrib.value = ''
    musicTypeIndex.value = 0
    placeholderKeyword.value = ''
    musiclyric.value = ''
    isSlideActive.value = false
  }
  
  </script>
  
  <style scoped>
  .container {
    display: flex; 
    min-height: 100vh; 
    background: linear-gradient(180deg, rgba(30, 30, 64, 1) 0%, rgba(32, 32, 50, 1) 100%);
  }
  
  .content {
    flex: 1; /* 自动填充剩余空间 */
    overflow-y: auto; /* 允许垂直滚动 */
  }


.compositon_content{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: start;
}

.compositon_left{
  width: 450px;
  height: 100%;
  border-right: 1px solid #393a4a;
  overflow-y: scroll;
  font-size: 16px;
  padding-right: 10px;
  padding-bottom: 30px;
  box-sizing: border-box;

}

.comp_type{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.comp_type_button {
  width: 198px;
  height: 42px;
  border: 1px solid #414162;
  border-radius: 5px;
  display: flex;
  flex-direction: row;
  justify-content: start;
}

.comp_type_button button {
  width: 50%;
  height: 100%;
  color: #FFF;
  font-size: 18px;
  border-radius: 5px;
}

.comp_type_button button.active {
  background-color: #FFF;
  color: #515a63;
}


/* 歌曲描述 */
.music_keyword{
    margin-top: 20px;
}
.textarea_con{
  width: 100%;
  height: 170px;
  background: linear-gradient(180deg, rgba(41, 41, 64, 1) 0%, rgba(71, 73, 83, 1) 100%);
  border-radius: 5px;
  border-top: 1px solid rgba(71, 73, 83, 1);
  overflow: hidden;
  margin-top: 10px;
}

.textarea_con textarea {
  width: 100%;
  height: 120px;
  border: none;
  padding: 5px;
  box-sizing: border-box;
  background: none;
  color:#FFF;
  font-size: 14px;
}

.prompt{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.prompt button {
  width: 100px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: #a8a9b4;
  color: #515a63;
  border-radius: 5px;
  font-size: 16px;
  margin-left: 10px;
}

.prompt p {
  color: #bcc9de;
  font-size: 16px;
  margin-right: 10px;
}

.music_type {
  margin-top: 20px;
}

.button_row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.music_type_btn button{
  width: 86px;
  height: 42px;
  border-radius: 5px;
  margin-right: 10px;
  text-align: left;
  background:#FFF url(../images/icon_musicType_link.png) no-repeat 10px center;
  overflow: hidden;
  color: #515a63;
}

.music_type_btn button div {
  width: 100%;
  height: 100%;
  line-height: 42px;
  font-size: 16px;
  padding-left: 36px;
  box-sizing: border-box;
}

.music_type_btn button.active {
  background: linear-gradient(180deg, rgba(163, 253, 248, 1) 0%, rgba(191, 160, 254, 1) 100%);
}
.music_type_btn button.active div {
  background: url(../images/icon_musicType_active.png) no-repeat 4px center;
}

.tab_swtich_con {
  margin-top: 20px;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.tab_swtich_con p{
  font-size: 18px;
  color: #FFF;
  margin-right: 20px;
}

.tab_swtich{
  width: 50px;
  height: 31px;
  background-color: #CCC;
  padding:2px;
  box-sizing: border-box;
  border-radius: 50px;
  transition: all .3s;
}
.slide_btn {
  background: #fff;
  border-radius: 100px;
  width: 27px;
  height: 27px;
  box-shadow: 0px 3px 1px 0px rgba(0, 0, 0, 0.06), 0px 3px 8px 0px rgba(0, 0, 0, 0.15), 0px 0px 0px 1px rgba(0, 0, 0, 0.04);
  cursor: pointer;
  transition: all .3s;
}

.tab_swtich.active {
  background-color: #bbaefd;
}

.tab_swtich.active .slide_btn {
  margin-left: 19px;
}

.music_type_detail{
  width: 100%;
  height: 190px;
  margin-top: 20px;
}

.music_type_detail ul{
  
  display: flex;
  flex-wrap: wrap; /* 允许子元素自动换行 */
  gap: 10px; /* 设置元素之间的间隔 */
}

.music_type_detail ul li {
  width: 79px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #75767b;
  border: 1px solid #75767b;
  border-radius: 5px;
  box-sizing: border-box;
  cursor: pointer;
  overflow: hidden;
}

.music_type_detail ul li.active {
  background: linear-gradient(180deg, rgba(164, 252, 249, 1) 0%, rgba(190, 165, 254, 1) 100%);
  padding: 1px;
  box-sizing: border-box;
  color: #FFF;
  border: none;
  border-radius: 5px;
}
.music_type_detail ul li.active div {
  height: 38px;
  background-color: #3e3e61;
  border-radius: 5px;
}



.music_model {
  margin-top: 20px;
}

.model_btn {
  margin-top: 10px;
  width: 100%;
  height: 50px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, .38);
  /* box-shadow: -2px 3px 4.3px 0px rgba(210, 220, 237, 1); */
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  color: #FFF;
}


.lyrics_container {
  margin-top: 20px;
}

.lyrics_textarea {
  width: 100%;
  height: 230px;
  margin-top: 10px;
  border-radius: 5px;
  padding: 10px;
  box-sizing: border-box;
  background: linear-gradient(180deg, rgba(43, 43, 65, 1) 0%, rgba(70, 72, 82, 1) 100%);
}

.lyrics_textarea textarea {
  width: 100%;
  height: 164px;
  background:none;
  border: 0;
  color: #FFF;
  
}

.lyrice_btn {
  
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.lyrice_btn button {
  width: 109px;
  height: 42px;
  line-height: 42px;
  text-align: center;
  font-size: 16px;
  background: #a8a9b4;
  border-radius: 6px;
}

.lyrice_btn p {
  color:#bcc9de;
}

.reset_submit {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}

.reset_submit button {
  width: 188px;
  height: 42px;
  line-height: 42px;
  border-radius: 5px;
  font-size: 16px;
  color: #FFF;
  text-align: left;
  padding-left: 70px;
  box-sizing: border-box;
  transition: all .5s;
  background-color: #E13F79;
}

.reset_submit button:nth-child(1) {
  background-image:  url(../images/icon_reset.png);
  background-repeat: no-repeat;
  background-position: 64% center;
}

.reset_submit button:nth-child(2) {
  background-image: url(../images/icon_music.png);
  background-repeat: no-repeat;
  background-position: 64% center;
}

.disabled {
  opacity: .5;
}

.compositon_right{
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: start;
}

.show_lyric_area {
  width: 200px;
  height: 100%;
  /* background-color: red; */
}

.show_lyric_area textarea{
  width: 100%;
  height: 100%;
  padding: 20px;
  background: none;
  border: none;
  font-size: 14px;
  color: #FFF;
}

.show_lyric_area .showInstrumental {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  color: #FFF;
}

.show_music_area {
  /* background-color: blue; */
  height: 100%;
  flex: 1;
  overflow-y: scroll;
  padding-left: 30px;
  box-sizing: border-box;
}


.work_list {
  margin-bottom: 20px;
}

.title {
  font-size: 24px;
  color: #FFF;
} 

:deep(.el-message .el-message-icon--error) {
  width: 2em !important;
  height: 2em!important;
  font-size: 20px;
}

:deep(.el-message .el-message-icon--error svg){
  width: 2em!important;
  height: 2em!important;
  font-size: 20px;
}

:deep(.el-loading-spinner) {
  top: 36% !important;
}

.creating {
  width: 100%;
  height: 192px;
  margin-bottom: 10px;
}

.nowork {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.noworkIn {
  width: 300px;
  height:300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: auto;
}

.noworkIn img {
  width: 240px;
}

.noworkIn p {
  font-size: 14px;
  color: #FFF;
}

  </style>

  